<template>
	<div class="main-body">
		<div class="main-control" v-if="root">
			<div class="control-card">
				<div class="control-card-head">
					<div>
						<span>销售额</span>
					</div>
					<div>
						<el-radio-group v-model="salesDateType" size="mini"
							@input="getSalesAmount">
							<el-radio-button label="日"></el-radio-button>
							<el-radio-button label="月"></el-radio-button>
							<el-radio-button label="年"></el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div style="flex: 1;">
					<div class="control-card-body">
						<span>{{`￥${salesAmount.currSalesAmount}`}}</span>
					</div>
				</div>
				<div class="control-card-foot">
					<div class="control-card-foot-item">
						<span v-if="salesDateType==='日'">昨日</span>
						<span v-if="salesDateType==='月'">上月</span>
						<span v-if="salesDateType==='年'">去年</span>
						<span style="margin-left: 10px;">
							{{`￥${salesAmount.lastSalesAmount}`}}
						</span>
					</div>
					<div class="control-card-foot-item">
						<span v-if="salesDateType==='日'">日</span>
						<span v-if="salesDateType==='月'">月</span>
						<span v-if="salesDateType==='年'">年</span>
						<span>环比</span>
						<span style="margin-left: 10px;">
							{{salesAmount.salesAmountHuanBi}}%
						</span>
						<i class="el-icon-caret-top" style="font-size: 30px;color: #55ff00;"
							v-if="salesAmount.isHuanBi === 0">
						</i>
						<i class="el-icon-caret-bottom" style="font-size: 30px;color: #ff0000;"
							v-if="salesAmount.isHuanBi === 1">
						</i>
					</div>
				</div>
			</div>
			<div class="control-card">
				<div class="control-card-head">
					<div>
						<span>回款额</span>
					</div>
					<div>
						<el-radio-group v-model="refundDateType" size="mini"
							@input="getRefundAmount">
							<el-radio-button label="日"></el-radio-button>
							<el-radio-button label="月"></el-radio-button>
							<el-radio-button label="年"></el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div style="flex: 1;">
					<div class="control-card-body">
						<span>{{`￥${refundAmount.currRefundAmount}`}}</span>
					</div>
				</div>
				<div class="control-card-foot">
					<div class="control-card-foot-item">
						<span v-if="refundDateType==='日'">昨日</span>
						<span v-if="refundDateType==='月'">上月</span>
						<span v-if="refundDateType==='年'">去年</span>
						<span style="margin-left: 10px;">
							{{`￥${refundAmount.lastRefundAmount}`}}
						</span>
					</div>
					<div class="control-card-foot-item">
						<span v-if="refundDateType==='日'">日</span>
						<span v-if="refundDateType==='月'">月</span>
						<span v-if="refundDateType==='年'">年</span>
						<span>环比</span>
						<span style="margin-left: 10px;">
							{{refundAmount.refundAmountHuanBi}}%
						</span>
						<i class="el-icon-caret-top" style="font-size: 30px;color: #55ff00;"
							v-if="refundAmount.isHuanBi === 0">
						</i>
						<i class="el-icon-caret-bottom" style="font-size: 30px;color: #ff0000;"
							v-if="refundAmount.isHuanBi === 1">
						</i>
					</div>
				</div>
			</div>
			<div class="control-card">
				<div class="control-card-head">
					<div>
						<span>订单量</span>
					</div>
					<div>
						<el-radio-group v-model="orderDateType" size="mini"
							@input="getOrderTotal">
							<el-radio-button label="日"></el-radio-button>
							<el-radio-button label="月"></el-radio-button>
							<el-radio-button label="年"></el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div style="flex: 1;">
					<div class="control-card-body">
						<span>{{orderTotal.currOrderTotal}}</span>
					</div>
				</div>
				<div class="control-card-foot">
					<div class="control-card-foot-item">
						<span v-if="orderDateType==='日'">昨日</span>
						<span v-if="orderDateType==='月'">上月</span>
						<span v-if="orderDateType==='年'">去年</span>
						<span style="margin-left: 10px;">
							{{orderTotal.lastOrderTotal}}
						</span>
					</div>
					<div class="control-card-foot-item">
						<span v-if="orderDateType==='日'">日</span>
						<span v-if="orderDateType==='月'">月</span>
						<span v-if="orderDateType==='年'">年</span>
						<span>环比</span>
						<span style="margin-left: 10px;">
							{{orderTotal.orderTotalHuanBi}}%
						</span>
						<i class="el-icon-caret-top" style="font-size: 30px;color: #55ff00;"
							v-if="orderTotal.isHuanBi === 0">
						</i>
						<i class="el-icon-caret-bottom" style="font-size: 30px;color: #ff0000;"
							v-if="orderTotal.isHuanBi === 1">
						</i>
					</div>
				</div>
			</div>
			<div class="control-card">
				<div class="control-card-head">
					<div>
						<span>客户量</span>
					</div>
					<div>
						<el-radio-group v-model="clientDateType" size="mini"
							@input="getClientTotal">
							<el-radio-button label="日"></el-radio-button>
							<el-radio-button label="月"></el-radio-button>
							<el-radio-button label="年"></el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div style="flex: 1;">
					<div class="control-card-body">
						<span>{{clientTotal.currClientTotal}}</span>
					</div>
				</div>
				<div class="control-card-foot">
					<div class="control-card-foot-item">
						<span v-if="clientDateType==='日'">昨日</span>
						<span v-if="clientDateType==='月'">上月</span>
						<span v-if="clientDateType==='年'">去年</span>
						<span style="margin-left: 10px;">
							{{clientTotal.lastClientTotal}}
						</span>
					</div>
					<div class="control-card-foot-item">
						<span v-if="clientDateType==='日'">日</span>
						<span v-if="clientDateType==='月'">月</span>
						<span v-if="clientDateType==='年'">年</span>
						<span>环比</span>
						<span style="margin-left: 10px;">
							{{clientTotal.clientTotalHuanBi}}%
						</span>
						<i class="el-icon-caret-top" style="font-size: 30px;color: #55ff00;"
							v-if="clientTotal.isHuanBi === 0">
						</i>
						<i class="el-icon-caret-bottom" style="font-size: 30px;color: #ff0000;"
							v-if="clientTotal.isHuanBi === 1">
						</i>
					</div>
				</div>
			</div>
		</div>
		<div :class="{'main-message-root':root,'main-message':!root}">
			<div class="bar-diagram">
				<div class="bar-diagram-head">
					<span style="margin-left: 15px;">
						{{root ? '条形统计图(销售额)' : '条形统计图(工作时长)'}}
					</span>
          <div style="float: right; margin-right: 2%; margin-top: 3px;">
            请选择年份:
            <el-select v-model="barChartMonth" placeholder="请选择年份" @change="getSaleroomMonth" style="width: 72%">
              <el-option
                  v-for="item in barChartOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
				</div>
				<div class="bar-diagram-echar">
					<div class="echar" ref="charts"></div>
				</div>
			</div>
			<div class="control-message">
				<div class="control-message-head">
					<div class="my-radio-grop">
						<div class="my-radio-button my-radio-button-left" 
							:class="{'my-radio-activate':radio===0}" @click="changeRadio(0)">
							<span>待处理</span>
							<span v-show="radio===0" style="margin-left: 5px;">
								<el-tooltip effect="light" content="一键删除" placement="bottom">
								    <i class="el-icon-delete" style="font-size: 16px;
										color: #F56C6C;" @click="deleteMsgAll">
								    </i>
								</el-tooltip>
							</span>
						</div>
						<div class="my-radio-button my-radio-button-right"
							:class="{'my-radio-activate':radio===1}" @click="changeRadio(1)">
							<span>已处理</span>
							<span v-show="radio===1" style="margin-left: 5px;">
								<el-tooltip effect="light" content="一键删除" placement="bottom">
								    <i class="el-icon-delete" style="font-size: 16px;
										color: #F56C6C;" @click="deleteMsgAll">
								    </i>
								</el-tooltip>
							</span>

						</div>
					</div>
				</div>
				<div class="control-message-body">
					<div style="width: 100%;height: 98%;overflow: auto;" ref="message" 
						@scroll="loadMsg">
						<div class="control-message-row" v-for="(item,index) in msgList">
							<div style="flex: 1;display: flex;" @click="toPage(item)">
								<div style="width: 50px;height: 50px;">
									<el-image style="width: 100%; height: 100%;border-radius: 5px;"
									    :src="imgUrl+item.publisherImg" fit="cover">
									</el-image>
								</div>
								<div class="control-message-row-body">
									<div style="font-weight: 600;">
										<span>{{item.title}}</span>
									</div>
									<div style="font-size: 14px;padding: 5px 0;">
										<span>{{item.content}}</span>
									</div>
									<div style="font-size: 13px;color: #909399;">
										<span>{{item.publisherName}}</span>
										<span style="margin-left: 20px;">
											<i class="el-icon-time"></i>
											{{item.createTime}}
										</span>
									</div>
								</div>
							</div>
							<div class="control-message-row-foot">
								<div v-if="item.status === 0">
									<el-tooltip effect="light" content="设为已处理"
										placement="bottom">
									    <i class="el-icon-warning" style="font-size: 20px;
									    	color: darkorange;" @click="updateMsgStatus(item,1)">
									    </i>
									</el-tooltip>
								</div>
								<div v-if="item.status === 1">
									<el-tooltip effect="light" content="设为待处理"
										placement="bottom">
									    <i class="el-icon-success" style="font-size: 20px;
									    	color: #55ff00;" @click="updateMsgStatus(item,0)">
									    </i>
									</el-tooltip>
								</div>
								<div>
									<i class="el-icon-close" style="font-size: 20px;" 
										@click="deleteMsg(item)">
									</i>
								</div>
							</div>
						</div>
						<div style="width: 100%;text-align: center;color: #9499a9;">
							<span>————没有更多了————</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-ranking" v-if="root">
			<div class="control-ranking">
				<div class="control-ranking-head">
					<span style="margin-left: 15px;">销售金额排行</span>
					<div style="margin-right: 15px;">
						<el-tag size="small">月</el-tag>
					</div>
				</div>
				<div class="control-ranking-body">
					<div style="width: 100%;height: 96%;overflow-y: auto;">
						<div class="control-ranking-row" v-for="(item,index) in salesRanking">
							<div class="control-ranking-img">
								<el-image style="width: 100%; height: 100%;border-radius: 5px;"
								    :src="imgUrl+item.userImg" fit="cover">
								</el-image>
							</div>
							<div style="height: 100%;margin-left: 10px;display: flex;
								flex-direction: column;justify-content: space-between;">
								<div>
									<span>{{item.nickName}}</span>
								</div>
								<div>
									<span>{{`￥${item.salesAmount}`}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="control-ranking">
				<div class="control-ranking-head">
					<span style="margin-left: 15px;">回款金额排行</span>
					<div style="margin-right: 15px;">
						<el-tag size="small">月</el-tag>
					</div>
				</div>
				<div class="control-ranking-body">
					<div style="width: 100%;height: 96%;overflow-y: auto;">
						<div class="control-ranking-row" v-for="(item,index) in refundRanking">
							<div class="control-ranking-img">
								<el-image style="width: 100%; height: 100%;border-radius: 5px;"
								    :src="imgUrl+item.userImg" fit="cover">
								</el-image>
							</div>
							<div style="height: 100%;margin-left: 10px;display: flex;
								flex-direction: column;justify-content: space-between;">
								<div>
									<span>{{item.nickName}}</span>
								</div>
								<div>
									<span>{{`￥${item.collectionAmount}`}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="control-ranking">
				<div class="control-ranking-head">
					<span style="margin-left: 15px;">新增客户排行</span>
					<div style="margin-right: 15px;">
						<el-tag size="small">月</el-tag>
					</div>
				</div>
				<div class="control-ranking-body">
					<div style="width: 100%;height: 96%;overflow-y: auto;">
						<div class="control-ranking-row" v-for="(item,index) in clientAddRanking">
							<div class="control-ranking-img">
								<el-image style="width: 100%; height: 100%;border-radius: 5px;"
								    :src="imgUrl+item.userImg" fit="cover">
								</el-image>
							</div>
							<div style="height: 100%;margin-left: 10px;display: flex;
								flex-direction: column;justify-content: space-between;">
								<div>
									<span>{{item.userName}}</span>
								</div>
								<div>
									<span>{{`${item.clientsAddTotal}人`}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="control-ranking">
				<div class="control-ranking-head">
					<span style="margin-left: 15px;">回访客户排行</span>
					<div style="margin-right: 15px;">
						<el-tag size="small">月</el-tag>
					</div>
				</div>
				<div class="control-ranking-body">
					<div style="width: 100%;height: 96%;overflow-y: auto;">
						<div class="control-ranking-row" v-for="(item,index) in clientBackRanking">
							<div class="control-ranking-img">
								<el-image style="width: 100%; height: 100%;border-radius: 5px;"
								    :src="imgUrl+item.userImg" fit="cover">
								</el-image>
							</div>
							<div style="height: 100%;margin-left: 10px;display: flex;
								flex-direction: column;justify-content: space-between;">
								<div>
									<span>{{item.userName}}</span>
								</div>
								<div>
									<span>{{`${item.clientsBackTotal}人`}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="control-ranking">
				<div class="control-ranking-head">
					<span style="margin-left: 15px;">员工考勤排行</span>
					<div style="margin-right: 15px;">
						<el-tag size="small">月</el-tag>
					</div>
				</div>
				<div class="control-ranking-body">
					<div style="width: 100%;height: 96%;overflow-y: auto;">
						<div class="control-ranking-row" v-for="(item,index) in attendanceRanking">
							<div class="control-ranking-img">
								<el-image style="width: 100%; height: 100%;border-radius: 5px;"
								    :src="imgUrl+item.userImg" fit="cover">
								</el-image>
							</div>
							<div style="height: 100%;margin-left: 10px;display: flex;
								flex-direction: column;justify-content: space-between;">
								<div>
									<span>{{item.userName}}</span>
								</div>
								<div>
									<span>{{`${item.workingHours}小时`}}</span>
									<span>{{`${item.workingMinute}分钟`}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import config from "../api/apiURL.js"
	import masterControlApi from "../api/masterControl.js";
	import orderApi from "../api/order.js";
	import {deepCopy} from "../utils/common.js";
  import router from "@/router";
	export default {
		name: "Index",
		data() {
			return {
				radio: 0,
				userInfo: {},
				root: false,
				salesDateType: '月',
				salesAmount: {
					currSalesAmount: 0,
					lastSalesAmount: 0,
					salesAmountHuanBi: 0
				},
				refundDateType: '月',
				refundAmount: {
					currRefundAmount: 0,
					lastRefundAmount: 0,
					refundAmountHuanBi: 0
				},
				orderDateType: '月',
				orderTotal: {
					currOrderTotal: 0,
					lastOrderTotal: 0,
					orderTotalHuanBi: 0
				},
				clientDateType: '月',
				clientTotal: {
					currClientTotal: 0,
					lastClientTotal: 0,
					clientTotalHuanBi: 0
				},
				salesRanking: [],
				refundRanking: [],
				clientAddRanking: [],
				clientBackRanking: [],
				attendanceRanking: [],
				formMsg: {
					currentPage: 1,
					pageSize: 10,
					msgStatus: 0, // 待处理
					total: 0, 
					notData: false, // false为有数据，true为无数据
					isReset: false,
				},
				msgList: [],
				saleroomMonth: [],
				refundMonth: [],
				expendituresMonth: new Array(),
				grossProfitMonth: new Array(),
				netProfitMonth: new Array(),
				imgUrl: config.READ_IMG_URL,
        supplierBilling: [],
        timer: null,  // 定时器
        time: 10000,    // 定时器多久执行一次
        barChartMonth: new Date().getFullYear(),
        barChartOptions: [],
        minBarChartMonth: 2024
      }
		},
		mounted() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			if (this.userInfo.roleId === '1'){
				this.root = true;
				this.getSalesAmount();
				this.getRefundAmount();
				this.getOrderTotal();
				this.getClientTotal();
				this.getSalesRanking();
				this.getClientRanking();
				this.getAttendanceRanking();
        if (this.timer == null) {
          this.getSaleroomMonth();
          this.timer = setInterval(() => {
            this.getSaleroomMonth();
          }, this.time);
        } else {
          if (this.$route.path !== "/index") {
            clearInterval(this.timer);
            this.timer = null;
          }
        }
			}else {
				this.root = false;
				this.getWorkingHoursMonth();
			}
			this.getMsgNotificationList();
      const currentYear = new Date().getFullYear();
      for (let i = this.minBarChartMonth; i <= currentYear; i++) {
        this.barChartOptions.push(
            {
              label: `${i}年`,
              value: i
            }
        );
      }
		},
		methods: {
			// 获取销售额
			getSalesAmount(){
				let data = {
					dateType: 0
				}
				if (this.salesDateType==='月'){
					data.dateType = 1
				}else if (this.salesDateType==='年'){
					data.dateType = 2
				}
				masterControlApi.salesAmount(data).then(res =>{
					if (res.code === 200){
						this.salesAmount = res.data;
					}
				})
			},
			// 获取回款额
			getRefundAmount(){
				let data = {
					dateType: 0
				}
				if (this.refundDateType==='月'){
					data.dateType = 1
				}else if (this.refundDateType==='年'){
					data.dateType = 2
				}
				masterControlApi.refundAmount(data).then(res =>{
					if (res.code === 200){
						this.refundAmount = res.data;
					}
				})
			},
			// 获取订单总计
			getOrderTotal(){
				let data = {
					dateType: 0
				}
				if (this.orderDateType==='月'){
					data.dateType = 1
				}else if (this.orderDateType==='年'){
					data.dateType = 2
				}
				masterControlApi.orderTotal(data).then(res =>{
					if (res.code === 200){
						this.orderTotal = res.data;
					}
				})
			},
			// 获取客户总计
			getClientTotal() {
				let data = {
					dateType: 0
				}
				if (this.clientDateType==='月'){
					data.dateType = 1
				}else if (this.clientDateType==='年'){
					data.dateType = 2
				}
				masterControlApi.clientTotal(data).then(res =>{
					if (res.code === 200){
						this.clientTotal = res.data;
					}
				})
			},
			// 获取销售排行
			getSalesRanking() {
				let data = {
					roleId: "3"
				}
				orderApi.orderRoyalty(data).then(res =>{
					if (res.code === 200){
						this.salesRanking = deepCopy(res.data);
						this.salesRanking.sort((a,b) => b.salesAmount - a.salesAmount);
						this.refundRanking = deepCopy(res.data);
						this.refundRanking.sort((a,b) => b.collectionAmount - a.collectionAmount);
					}
				})
			},
			// 获取客户排行
			getClientRanking() {
				masterControlApi.clientRanking().then(res =>{
					if (res.code === 200){
						this.clientAddRanking = deepCopy(res.data);
						this.clientAddRanking.sort((a,b) => b.clientsAddTotal - a.clientsAddTotal);
						this.clientBackRanking = deepCopy(res.data);
						this.clientBackRanking.sort((a,b) => b.clientsBackTotal - a.clientsBackTotal);
					}
				})
			},
			// 获取出勤排行
			getAttendanceRanking() {
				masterControlApi.attendanceRanking().then(res =>{
					if (res.code === 200){
						this.attendanceRanking = res.data;
						this.attendanceRanking.sort((a,b) => b.workingSeconds - a.workingSeconds);
					}
				})
			},
			// 获取消息通知
			getMsgNotificationList() {
				masterControlApi.getMsgNotificationList(this.formMsg).then(res =>{
					if (res.code === 200) {
						if (this.formMsg.isReset){
							this.msgList = [];
							this.formMsg.isReset = false;
						}
						this.formMsg.total = res.data.total;
						if (res.data.msgVoList.length === 0){
							this.formMsg.notData = true;
						}else {
							res.data.msgVoList.forEach(item => {
								this.msgList.push(item);
							});
						}
					}
				})
			},
			// 修改消息状态
			updateMsgStatus(item,status){
				if (item.status !== status){
					const data = {
						msgId: item.id,
						msgStatus: status
					}
					masterControlApi.updateMsgNotification(data).then(res =>{
						if (res.code === 200){
							// 将该消息从列表中删除
							const index = this.msgList.findIndex(msg =>msg.id===item.id);
							this.msgList.splice(index, 1);
						}
					})
				}
			},
			// 滑动到底部
			loadMsg(event){
				const message = this.$refs.message
				const index = message.scrollHeight - message.scrollTop;
				
				// 判断是否滚动到底部
				if (index > message.clientHeight-1 && index < message.clientHeight+1.5) {
				    // 执行滚动到底部时的操作
					if (this.formMsg.notData){
						// 无数据
						return;
					}else {
						console.log("到底部")
						this.formMsg.currentPage++;
						this.getMsgNotificationList();
					}
				}
			},
			// 页面跳转
			toPage(item){
				if (item.msgType === 1){
					// 公司文化
					if (item.submenu === 3){
						// 添加和详情
						localStorage.setItem("materialId", item.relevanceId)
						this.$router.push({
							path: "/companyCulture/material/editMaterial"
						})
					}
				}else if (item.msgType === 2){
					// 职工档案
					this.$router.push({
						path: "/goods/goods"
					})
				}else if (item.msgType === 3){
					// 员工考勤
					if (item.submenu === 5){
						// 考勤审批
						this.$router.push({
							path: "/employeeAttendance/apply"
						})
					}
					
				}else if (item.msgType === 4){
					// 客户管理
					if (item.submenu === 1){
						// 客户列表
						this.$router.push({
							path: "/user/user"
						})
					}
					
				}else if (item.msgType === 5){
					// 订单管理
					if (item.submenu === 1){
						// 订单列表
						this.$router.push({
							path: "/order/orderList"
						})
					}else if (item.submenu === 3){
						// 订单详情
						localStorage.setItem("orderId", item.relevanceId);
						this.$router.push({
							path: "/order/order"
						})
					}
					
				}else if (item.msgType === 6){
					// 仓库管理
					if (item.submenu === 1){
						// 采购管理
						this.$router.push({
							path: "/warehouse/purchase/purchasing"
						})
					}else if (item.submenu === 2){
						// 入库管理
						this.$router.push({
							path: "/warehouse/warehouse"
						})
					}else if (item.submenu === 4){
						// 出库管理
						this.$router.push({
							path: "/warehouse/outbound/outbound"
						})
					}else if (item.submenu === 6){
						// 供应商管理
						this.$router.push({
							path: "/warehouse/supplier/supplier"
						})
					}else if (item.submenu === 7){
						// 采购详情
						localStorage.setItem("purchaseId", item.relevanceId);
						this.$router.push({
							path: "/warehouse/purchase/addPurchase"
						})
					}
					
				}else if (item.msgType === 7){
					// 售后管理
					if (item.submenu === 1){
						this.$router.push({
							path: "/afterSales/AfterDispatch"
						})
					}
				}else if (item.msgType === 8){
					// 报销管理
					if (item.submenu === 1){
						this.$router.push({
							path: "/expense/Expense"
						})
					}
				}
				this.updateMsgStatus(item,1);
			},
			// 获取月份销售额
			getSaleroomMonth(){
				masterControlApi.getSaleroomMonth(this.barChartMonth).then(res =>{
					if (res.code === 200){
						this.saleroomMonth = res.data.saleroomMonth;
						this.refundMonth = res.data.refundMonth;
						this.expendituresMonth = res.data.expendituresMonth
						this.grossProfitMonth = res.data.grossProfitMonth
						this.netProfitMonth = res.data.netProfitMonth
            this.supplierBilling = res.data.supplierBilling;
            this.barChart();
					}
				})
			},
			// 获取工作时长
			getWorkingHoursMonth(){
				masterControlApi.getWorkingHoursMonth().then(res =>{
					if (res.code === 200){
						this.saleroomMonth = res.data;
						this.barChart();
					}
				})
			},
			// 条形统计图
			barChart(){
				let series = [];
				if (this.root){
					series = [{
							name: "销售额（￥）",
							type: 'bar',
							data: this.saleroomMonth,
						},{
							name: "回款额（￥）",
							type: 'bar',
							data: this.refundMonth,
						},{
							name: "支出金额（￥）",
							type: 'bar',
							data: this.expendituresMonth,
						},{
							name: "需支出金额（￥）",
							type: 'bar',
							data: this.grossProfitMonth,
						},{
							name: "净利润（￥）",
							type: 'bar',
							data: this.netProfitMonth,
						},
            {
              name: "供应商应付金额（￥）",
              type: "bar",
              data: this.supplierBilling
            }
					]
				}else {
					series = [{
						name: "工作时长（小时）",
						type: 'bar',
						data: this.saleroomMonth,
					}]
				}
				
				var myChart = this.$echarts.init(this.$refs.charts);
				// 绘制图表
				var option = {
				  // title: {
				  //   text: 'ECharts 入门示例'
				  // },
				  tooltip: {},
				  xAxis: {
				    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
				  },
				  yAxis: {},
				  series: series,
				}
				window.onresize = myChart.resize;
				myChart.setOption(option);
			},
			// 改变单选
			changeRadio(index){
				if (this.radio !== index){
					this.radio = index;
					this.formMsg.currentPage = 1;
					this.formMsg.notData = false;
					this.formMsg.isReset = true;
					this.formMsg.msgStatus = this.radio;
					this.getMsgNotificationList();
				}
			},
			// 删除消息
			deleteMsg(item){
				const data = {
					msgId: item.id
				}
				masterControlApi.deleteMsgNotification(data).then(res =>{
					if (res.code === 200){
						// 将该消息从列表中删除
						const index = this.msgList.findIndex(msg =>msg.id===item.id);
						this.msgList.splice(index, 1);
					}
				})
			},
			// 一键删除
			deleteMsgAll(){
				let _this = this;
				this.$confirm("是否要一键删除？","提示",{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() =>{
					console.log("用户点击确定")
					const loading = this.$loading({
						lock: true,
						text: '请求中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					const data = {
						msgStatus: this.formMsg.msgStatus
					}
					masterControlApi.deleteMsgAll(data).then(res =>{
						if (res.code === 200){
							// 清除列表
							_this.msgList = [];
							_this.$message.success("操作成功");
						}
					}).finally(() =>{
						loading.close();
					})
				}).catch(() =>{
					console.log("用户点击取消")
				})

			}
		},
    destroyed() {
      if (this.timer != null) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
</script>

<style scoped>
	.main-body {
		width: 100%;
		height: 100%;
		/* background-color: #f0f2f5; */
	}

	.main-control {
		width: 100%;
		height: 30%;
		display: flex;
		justify-content: space-between;
	}

	.control-card {
		width: 21.8%;
		height: 95%;
		padding: 5px 15px;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		border: 1px solid #dee0e3;
		box-shadow: 2px 2px 5px 3px #dee0e3;
	}

	.control-card-head {
		height: 25%;
		line-height: 40px;
		font-size: 18px;
		display: flex;
		justify-content: space-between;
	}

	.control-card-body {
		height: 100%;
		font-size: 30px;
		font-weight: 500;
		text-align: center;
		line-height: 100px;
	}
	
	.control-card-foot{
		height: 25%;
		display: flex;
		justify-content: space-between;
	}
	
	.control-card-foot-item{
		display: flex;
		align-items: center;
	}

	.main-message-root {
		width: 100%;
		height: 68%;
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
	}
	
	.main-message{
		width: 100%;
		height: 99%;
		display: flex;
		justify-content: space-between;
	}

	.bar-diagram {
		width: 61%;
		height: 100%;
		border-radius: 10px;
		border: 1px solid #dee0e3;
		box-shadow: 2px 2px 5px 3px #dee0e3;
	}
	
	.bar-diagram-head{
		width: 100%;
		height: 9%;
		line-height: 40px;
		border-bottom: 1px solid #dee0e3;
	}
	
	.bar-diagram-echar{
		width: 100%;
		height: 90%;
	}
	
	.echar{
		width: 100%;
		height: 100%;
	}

	.control-message {
		width: 38%;
		height: 100%;
		border-radius: 10px;
		border: 1px solid #dee0e3;
		box-shadow: 2px 2px 5px 3px #dee0e3;
	}
	
	.control-message-head{
		width: 100%;
		height: 9%;
		line-height: 40px;
		border-bottom: 1px solid #dee0e3;
	}
	
	.control-message-body{
		width: 100%;
		height: 92%;
	}
	
	.control-message-row{
		width: 94%;
		margin: auto;
		padding: 5px 0px;
		display: flex;
		border-bottom: 1px solid #dee0e3;
	}
	
	.control-message-row:hover{
		background-color: #f4f4f5;
		cursor: pointer;
	}
	
	.control-message-row-body{
		flex: 1;
		margin-left: 10px;
	}
	
	.control-message-row-foot{
		width: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.main-ranking {
		width: 100%;
		height: 65%;
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
	}

	.control-ranking {
		width: 19.2%;
		height: 97%;
		border-radius: 10px;
		border: 1px solid #dee0e3;
		box-shadow: 2px 2px 5px 3px #dee0e3;
	}
	
	.control-ranking-head{
		width: 100%;
		height: 9%;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #dee0e3;
	}
	
	.control-ranking-body{
		width: 100%;
		height: 92%;
	}
	
	.control-ranking-row{
		width: 92%;
		height: 14%;
		padding: 10px 0px;
		margin: auto;
		display: flex;
		border-bottom: 1px solid #dee0e3;
	}
	
	.control-ranking-img{ 
		width: 52px;
		height: 52px;
		margin-left: 6px;
	}
	
	.el-icon-warning:hover{
		cursor: pointer;
	}
	
	.my-radio-grop{
		width: 100%;
		height: 100%;
		display: flex;
		/* border-radius: 5px; */
	}
	
	.my-radio-button{
		flex: 1;
		text-align: center;
		border-top: 1px solid #dee0e3;
		border-bottom: 1px solid #dee0e3;
		border-left: 1px solid #dee0e3;
	}
	
	.my-radio-button:hover{
		cursor: pointer;
	}
	
	.my-radio-button-left{
		border-radius: 5px 0 0 5px;
	}
	
	.my-radio-button-right{
		/* background-color: #ffffff; */
		border-right: 1px solid #dee0e3;
		border-radius: 0 5px 5px 0;
	}
	
	.my-radio-activate{
		color: #ffffff;
		background-color: #409eff;
	}
</style>